



import { useEffect, useState } from 'react'
import { Input, Select, Table, Tag, Space, Form, Button } from 'antd';
import { useSelector, useDispatch, ProdTagModelState, Link } from "umi";
import styles from './index.less'
import {
  AppstoreOutlined,
  DeleteOutlined,
  EditOutlined,
  SearchOutlined,
  SyncOutlined
} from '@ant-design/icons';
const prodList = () => {
  // const prodTagList = useSelector((state: { ProdTagList: ProdTagModelState }) => state.ProdTagList);
  const dispatch = useDispatch()
  // console.log(prodTagList, '页面');

  const { Option } = Select;
  useEffect(() => {
    // dispatch({
    //   type: 'prod-prodTag/getProdTagList'
    // })
  }, [])

  const [isFlag, setIsFlag] = useState(true);

  function changeFlag() {
    console.log(123);
    setIsFlag(!isFlag)
    console.log(isFlag);
  }
  function refresh() {
    console.log('请求数据');

  }
 const columns = [
    {
      title: '分类名称',
      dataIndex: 'name',
      key: 'name',
      align: "center"
    },
    {
      title: '图片',
      dataIndex: 'age',
      key: 'age',
      align: "center"
    },
    {
      title: '状态',
      dataIndex: 'address',
      key: 'address',
      align: "center"
    },
    {
      title: '排序号',
      key: 'tags',
      dataIndex: 'tags',
      align: "center",
    },
    {
      title: '操作',
      key: 'action',
      dataIndex: 'action',
      align: "center",
      render: () => (
        <Space size="middle">
          <div className={styles.revise}>
            <span>&nbsp;修改</span>
          </div>
          <div className={styles.remove}>
            <span>&nbsp;删除</span>
          </div>
        </Space>
      ),
    },
  ];

  return (
    <div className={styles.prodTag}>
      <div className={isFlag === true ? styles.serach : styles.serachNull}>
        <div className={styles.serachName}>
          <span>标签名称</span><Input placeholder="标签名称" />
        </div>
        <div className={styles.serachStatus}>
          <span className={styles.spans}>状态</span>
          <Form.Item style={{ width: '200px' }}>
            <Select
              placeholder="状态"
              allowClear
            >
              <Option value="male">禁用</Option>
              <Option value="female">正常</Option>
            </Select>
          </Form.Item>
        </div>
        <div className={styles.serachitem}>
          <SearchOutlined />
          <span>&nbsp;搜 索</span>
        </div>
        <div className={styles.empty}>
          <DeleteOutlined />
          <span>&nbsp;清 空</span>
        </div>
      </div>
      <div className={styles.add}>
        <div>
          <button><i>+</i> 新增</button>
          <Button disabled>批量删除</Button>
          {/* <button disabled>批量删除</button> */}
        </div>
        <div className={styles.icons}>
          <div onClick={refresh}><SyncOutlined /></div>
          <div><AppstoreOutlined /></div>
          <div onClick={changeFlag}><SearchOutlined /></div>
        </div>
      </div>
      <div className={styles.from}>
       <Table pagination={false} bordered={true} columns={columns}  />
      </div>
    </div>
  );
}
export default prodList